<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <head th:replace="common/common_css :: css(~{::link})">
    </head>
    <title>账号设置</title>
    <link th:href="@{/static/css/mcss/mcss_accountset.css}" rel="stylesheet">
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/chosen.min.css}"/>
    <link type="text/css" rel="stylesheet" th:href="@{/static/css/preloader.css}">
    <link th:href="@{/xtiper/css/xtiper.css}" type="text/css" rel="stylesheet"/>
    <script th:src="@{/xtiper/js/xtiper.js}" type="text/javascript"></script>
</head>
<body>

<div id="preloader">
    <div id="preloader-inner"></div>
</div>

<div id="wrapper">
    <div th:replace="common/common_left :: left"></div>

    <div id="content-wrapper" class="d-flex flex-column content-wrapper">
        <div id="content">
            <div th:replace="common/common_head :: head"></div>

            <!--正文-->
            <div style="margin-left: 15%">
                <div class="tab-content">
                    <div id="account1" class="container tab-pane active"><br>
                        <div style="width: 70%;float: left;">
                            <div class="card shadow mb-4" style="margin-left: 1%">
                                <div class="card-header py-3">
                                    <h6 class="m-0 font-weight-bold text-primary">登录信息</h6>
                                </div>

                                <div class="card-body">
                                    <div style=" margin-left: 1%;margin-right: 1%">
                                        <table id="LoginInfor" class="table table-bordered table-hover">
                                            <thead class="">
                                            <tr>
                                                <th style="text-align: center; " data-field="no">
                                                    <div class="th-inner ">序号</div>
                                                    <div class="fht-cell"></div>
                                                </th>

                                                <th style="text-align: center; vertical-align: middle; " data-field="loginIp">
                                                    <div class="th-inner ">IP地址</div>
                                                    <div class="fht-cell"></div>
                                                </th>
                                                <th style="text-align: center; vertical-align: middle; " data-field="loginBroswer">
                                                    <div class="th-inner ">登录邮箱</div><div class="fht-cell"></div>
                                                </th>
                                                <th style="text-align: center; vertical-align: middle; " data-field="loginAddress">
                                                    <div class="th-inner ">位置</div><div class="fht-cell"></div>
                                                </th>
                                                <th style="text-align: center; vertical-align: middle; " data-field="createDatetime">
                                                    <div class="th-inner ">时间</div><div class="fht-cell"></div>
                                                </th>
                                            </tr>
                                            </thead>

                                            <tbody th:each="d,loginInfo:${session.pageInfo.list}" >
                                            <tr data-index="1" data-uniqueid="223.104.64.195">
                                                <td style="text-align: center; " th:text="${loginInfo.index+1}"></td>
                                                <td style="text-align: center; vertical-align: middle; " th:text="${d.loginIp}"></td>
                                                <td style="text-align: center; vertical-align: middle; " th:text="${d.description}"></td>
                                                <td style="text-align: center; vertical-align: middle; " th:text="${d.loginAddress}"></td>
                                                <td style="text-align: center; vertical-align: middle; " th:text="${#dates.format(d.createDatetime,'yyyy-MM-dd HH:mm:ss')}"></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        <p>当前 <span th:text="${session.pageInfo.pageNum}"></span> 页,总 <span th:text="${session.pageInfo.pages}"></span> 页,共 <span th:text="${session.pageInfo.total}"></span> 条记录</p>
                                        <a th:href="@{/admin/toAccountSettings}">首页</a>
                                        <a th:href="@{/admin/toAccountSettings(pageNum=${session.pageInfo.hasPreviousPage}?${session.pageInfo.prePage}:1)}">上一页</a>
                                        <a th:href="@{/admin/toAccountSettings(pageNum=${session.pageInfo.hasNextPage}?${session.pageInfo.nextPage}:${session.pageInfo.pages})}">下一页</a>
                                        <a th:href="@{/admin/toAccountSettings(pageNum=${session.pageInfo.pages})}">尾页</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>



                    <div id="account2" class="container tab-pane fade"><br>
                        <div style="width: 70%;float: left;">
                            <div class="card shadow mb-4" style="margin-left: 1%">
                                <div class="card-header py-3">
                                    <h6 class="m-0 font-weight-bold text-primary">修改密码</h6>
                                </div>
                                <div class="card-body">
                                    <div style=" margin-left: 18%;margin-right: 4%;">

                                        <div class="form-group">
                                            <label for="oldPassword" class="col-sm-2 control-label">原始密码</label>
                                            <div class="col-sm-10">
                                                <input type="password" class="form-control" id="oldPassword">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="newPassword" class="col-sm-2 control-label">新密码</label>
                                            <div class="col-sm-10">
                                                <input type="password" class="form-control" id="newPassword">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="okPassword" class="col-sm-2 control-label">确认密码</label>
                                            <div class="col-sm-10">
                                                <input type="password" class="form-control" id="okPassword">
                                            </div>
                                        </div>
                                        <div style="margin-left: 70%;margin-top: 20px">

                                            <button class="btn btn-primary btn-lg" id="changePassword"
                                                    onclick="changePassword()">确认
                                            </button>

                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div id="account3" class="container tab-pane fade" ><br>
                        <div style="width: 70%;float: left;">
                            <div class="card shadow mb-4" style="margin-left: 1%;height: 450px">
                                <div class="card-header py-3">
                                    <h6 class="m-0 font-weight-bold text-primary">添加角色</h6>
                                </div>
                                <div class="card-body">
                                    <div style=" margin-left: 20%;margin-right: 4%;">


                                        <div style="font-size: 18px">
                                            <div style="display: flex;margin-top: 1.5rem">
                                                <div>当前账户:
                                                        <a th:text="${session.user.email}"></a>
                                                </div>
                                            </div> </div>
                                        <div style="margin-left: 4rem">
                                            当前用户拥有角色：
                                                    <div th:each="UserRole:${session.UserRole}">
                                                  <a  th:text="${UserRole.description}"></a>
                                                    </div>
                                        </div>

                                            <div style="margin-top: 2.5rem" shiro:hasAllRoles="admin">
                                                选择添加的角色
                                                <select class='roleSelect' name="description"  id="description" data-placeholder=' '>
                                                    <option  th:each="rolelist:${session.roleList}" th:value="${rolelist.description}" th:text="${rolelist.description}" style="text-align: center"></option>
                                                </select>
                                            </div>
                                        </div>


                                        <div style="margin-left: 60%;margin-top: 30px">
                                            <button class="btn btn-primary btn-lg" onclick="addAnotherRole()">确认
                                            </button>

                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
                <div style="width: 20%;float: left">
                    <div style="width: 40%;">
                        <ul class="nav nav-pills  flex-column" role="tablist">
                            <li class="nav-item" style="text-align: center">
                                <a class="nav-link active" data-toggle="pill" href="#account1">登录记录</a>
                            </li>
                            <li class="nav-item" style="text-align: center">
                                <a class="nav-link" data-toggle="pill" href="#account2">修改密码</a>
                            </li>
                            <li class="nav-item" style="text-align: center">
                                <a class="nav-link" data-toggle="pill" href="#account3">添加角色</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>

<div>
    <div th:replace="common/common_js :: js(~{::script})"></div>

    <script th:src="@{/static/sb-admin-2/bootstrap/bootstrap-table-zh-CN.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/mjs/mjs_accountset.js}"></script>
</div>
</body>
<script>
    var i = 0;
          $("#oldPassword").blur(function () {
           //获取旧代密码
           var oldPassword=$("#oldPassword").val();
           if(oldPassword==null||oldPassword==''){
               xtip.msg('原密码不能为空', {icon: 'e'});
               return;
           }
            var param={"oldPassword":oldPassword};
            $.getJSON("/admin/checkPwd",param,function (data) {
                if(data.state==200){
                    xtip.msg(data.message, {icon: 's'});
                }else{
                    xtip.msg(data.message, {icon: 'e'});
                }
            });
          });

          $("#newPassword").blur(function () {
              //获取旧代密码
              var newPassword=$("#newPassword").val();
              if(newPassword==null||newPassword==''){
                  xtip.msg('新密码不能为空', {icon: 'e'});
                  return;
              }
          });

     //给确认密码添加一个失去焦点事件
     $("#okPassword").blur(function () {
         //获取新密码
         var newPassword= $("#newPassword").val();
         //获取确认密码
         var okPassword = $("#okPassword").val();
         if(newPassword!=okPassword){
             xtip.msg('两次输入密码不一致', {icon: 'e'});
         }else{
             xtip.msg('密码验证通过', {icon: 's'});
         }
     });


          function changePassword() {
              var oldPassword=$("#oldPassword").val();
              var newPassword = $("#newPassword").val();
              var okPassword = $("#okPassword").val();
              var param = {"oldPassword":oldPassword,"newPassword":newPassword,"okPassword":okPassword};
              $.post("/admin/doUpdatePwd",param,function (data) {
                  if(data.state==200){
                      alert(data.message);
                      location.href="/admin/login";
                  }
                  else{
                      alert(data.message);
                  }
              });
          }

function addAnotherRole() {
   var description=$("#description").val();
   var param={"description":description};
   $.post("/admin/addUserRole",param,function (data) {
       if (data.state==200){
          alert(data.message);
           location.reload();
       }else{
           xtip.msg(data.message, {icon: 'e'});
       }

   })
}

</script>
</html>